.bg {
  --at-apply: w-full h-full bg-cover flex items-center justify-center bg-gray-50;
  background-image: url('@/assets/images/login_bg.svg')
}

.box {
  --at-apply: w-90% h-90% relative flex flex-col justify-center items-center gap-10 p-10 m-10 rd-4;
  --at-apply: xl:flex-row xl:justify-around;
  background-color: hsla(0deg, 0%, 100%, 0.8);
}

.form {
  --at-apply: flex-none max-w-536px w-full resize-both p-10 p-b-4 rd-4 shadow-xl;
}

.theme-switch {
  --at-apply: absolute top-10 right-10
}

.dark {
  .bg {
    background-color: var(--el-fill-color-extra-light);
  }

  .box {
    background-color: var(--el-mask-color);
  }

  .form {
    --at-apply: shadow-dark;
    background-color: var(--el-bg-color);
  }
}
